<template>
  <div class="main">
    <!-- 环境数据监测 -->
    <div class="farm-main">
      <div class="tr-sid">
        <div class="sid-head">设备列表</div>
        <div class="sid-tree"><Equiplist @selectionChange="selectionChange" /></div>
      </div>
      <div class="tab-box">
        <div class="tab-box-view">
          <div class="tab-box-view-item">
            设备启动状态:
          </div>
          <p class="tab-box-view-item-state" :style="{color:'red'}">
            <!-- {{ nowEquipObject.batchName?nowEquipObject.batchName:'未获取状态' }} -->
          </p>
        </div>
        <div class="tab-box-con-one">
          <div class="back-picture-box" :style="{background:'url('+setBackground()+')100% 100% center center no-repeat'}">
            <vue-drag-resize
              v-for="(item, index) in dataItemList"
              :key="index"
              :x="item[0].xaxis"
              :y="item[0].yaxis"
              :h="25"
              :w="250"
              :is-active="true"
              :is-draggable="false"
              :is-resizable="false"
              :parent-limitation="true"
              class="one-dataItem-box"
            >
              <div v-for="(itemone,indexone) in item" :key="indexone" @click="setBottomData(item)">
                <Greencard :now-select-data-item-id="nowSelectDataItemId" :now-card-message="itemone" />
              </div>
            </vue-drag-resize>
          </div>

          <div class="standing-book-box">
            <Box title="设备信息">
              <template v-slot:notitlebox>
                <p class="standing-book-box-item">设备编号：{{ standingBookObject.equipmentCode?standingBookObject.equipmentCode:'--' }}</p>
                <p class="standing-book-box-item">设备名称：{{ standingBookObject.equipmentName?standingBookObject.equipmentName:'--' }}</p>
                <p class="standing-book-box-item">是否可自动驾驶：{{ standingBookObject.selfDriving?(standingBookObject.selfDriving===true?'是':'否'):'--' }}</p>
                <p class="standing-book-box-item">设备型号编码：{{ standingBookObject.equModel?standingBookObject.equModel.equModelCode:'--' }}</p>
                <p class="standing-book-box-item">设备型号名称：{{ standingBookObject.equModel?standingBookObject.equModel.modelName:'--' }}</p>
              </template>
            </Box>
          </div>
        </div>
        <div class="tab-box-con-two">
          <div v-for="(itemtwo,indextwo) in nowClickList" :key="indextwo" class="card-style" @click="clickbottom(itemtwo)">
            <Bluecard :now-card-message="itemtwo" />
          </div>
        </div>
      </div>
    </div>
    <Linedialog
      ref="Linedialog"
      :show.sync="dialogVisible"
      :equipment-name="equipmentName"
      :data-item-id="dataItemId"
      :equipment-code="equipmentCode"
      @closeDialog="closeDialog"
    />
  </div>
</template>
<script>
import Equiplist from "@/components/EquipList/equiplist-operation.vue"
import Greencard from "./component/greencard.vue"
import Bluecard from "./component/bluecard.vue"
import physicalUnionDataApi from "@/api/physical-union-monitoring/physical-union-data/index";
import { mymixin } from "@/utils/mixin"
import Box from "./component/box.vue"
import Linedialog from "./component/linedialog.vue"
import equipStandingBookApi from "@/api/equip-manage/equip-standing-book";

export default {
  name: "PhysicalUnionData",
  components: { Equiplist, Greencard, Bluecard, Box, Linedialog },
  mixins: [mymixin],
  data() {
    return {
      // 当前选中的数据项
      nowSelectDataItemId: 0,
      // 当前设备数据
      equipmentCode: '',
      // 当前选中设备
      equipmentName: '',
      // 弹框相关
      dialogVisible: false,
      // ---环境数据相关
      dataItemList: [],
      // 最下面的当前的数据项列表
      nowClickList: [],
      // 设备台账
      standingBookObject: {},
      // 当前的设备数据项
      dataItemId: 0
    }
  },
  watch: {
  },
  mounted() {
    alert()
  },
  methods: {
    // 选择设备传出选择的该设备信息
    selectionChange(e) {
      this.equipmentName = e.equipmentName;
      this.equipmentCode = e.equipmentCode;
      this.nowClickList = []
      this.queryAllLatestData()
      this.queryStandingBook()
    },
    // 查询设备数据项的最新数据
    queryAllLatestData() {
      this.dataItemList = []
      physicalUnionDataApi.queryAllLatestData(this.equipmentCode).then(
        res => {
          if (res.code === 1) {
            let data = res.data || []
            if (data.length > 0) {
              // // data[0]['dataTypeId'] = 1
              // data[0]['latestValue'] = 23
              // data[0]['direction'] = 'HIGH'
              // data[0]['xaxis'] = Number(data[0]['xaxis'])
              // data[0]['yaxis'] = Number(data[0]['yaxis'])
              // // data[0]['dataTypeName'] = '噪音'
              // data[0]['latestDate'] = '2020-05-09 15:30:23'
              // // data[1]['dataTypeId'] = 2
              // data[1]['latestValue'] = 23
              // data[1]['direction'] = 'LOW'
              // // data[1]['dataTypeName'] = '测试'
              // data[1]['latestDate'] = '2020-05-09 15:30:23'
              // data[1]['xaxis'] = Number(data[1]['xaxis'])
              // data[1]['yaxis'] = Number(data[1]['yaxis'])
              this.dataItemList = []
              if (data.length > 0) {
                var dataTypeId = 0
                data.forEach((a) => {
                  if (dataTypeId !== a['dataTypeId']) {
                    dataTypeId = a['dataTypeId']
                    var list = []
                    data.forEach(b => {
                      if (b.dataTypeId === dataTypeId) {
                        list.push(a)
                      }
                    })
                    this.dataItemList.push(list)
                  }
                })
              }
            }
            if (this.dataItemList.length > 0) {
              this.setBottomData(this.dataItemList[0])
            }
          } else {
            this.$message.error(res.msg)
          }
        }
      )
    },
    // 获取设备台账
    queryStandingBook() {
      equipStandingBookApi.query(this.equipmentCode).then(
        res => {
          if (res.code === 1) {
            let data = res.data || {}
            this.standingBookObject = data
          } else {
            this.$message.error('设备台账信息获取失败！')
          }
        }
      )
    },
    // -----------
    // 点击下面的数据类别，展示弹框
    clickbottom(list) {
      this.dataItemId = list.dataItemId
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.dataItemId = 0
    },
    // 点击上面的数据，得到下面的列表
    setBottomData(data) {
      this.nowClickList = data
      // this.nowClickList = [data]
      // this.dataItemList.forEach(a => {
      //   if (a.dataTypeId === data.dataTypeId) {
      //     this.nowClickList.push(a)
      //   }
      // })
      if (this.nowClickList.length > 0) {
        this.nowSelectDataItemId = this.nowClickList[0]['dataItemId']
      }
    },
    // 设置背景图
    setBackground(data) {
      // let equipmentTypeId = data.equipmentTypeId
      let equipmentTypeId = 1
      var backurl = ''
      switch (equipmentTypeId) {
        case 1:
          backurl = require("../../../assets/machine/machine1.png")
          break;
        case 2:
          backurl = require("../../../assets/machine/machine2.png")
          break;
        case 3:
          backurl = require("../../../assets/machine/machine2.png")
          break;
        default:
          backurl = require("../../../assets/machine/machine1.png")
          break;
      }
      // return 'background-image:url(' + backurl + ')'
      return backurl
    }
  }
}
</script>
<style lang="scss" scoped>
.vdr.active:before {
  display:none;
}
::v-deep .el-select .el-input__inner{
 color: #fff !important;
}
.card-style{
  width: 300px;
  height: 80px;
  margin-right: 10px;
}
.main{
  width: 100%;
  height: 100%;
}
.farm-main{
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .tr-sid{
    min-width: 200px;
    width: calc(15% - 10px);
    height: 100%;
    padding: 10px;
    background-color: #225768;
    .sid-head{
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 17px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
    .sid-tree{
      width: 100%;
      height: calc(100% - 40px);
      overflow-y: auto;
    }
  }
  .tab-box{
    width: calc(85% - 10px);
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    .tab-box-view{
      width: 100%;
      height: 50px;
      font-size:18px;
      padding: 10px ;
      background-color:  #225768;
      display: flex;
      align-items: center;
      .tab-box-view-item{
        color: #FFFFFF;
        padding:0 20px;
        border-left: 2px solid #FFFFFF;;
      }
      .tab-box-view-item-state{
        background-color: rgba(0, 57, 71, 0.55);
        padding: 5px 30px;
        border-radius: 18px 18px 18px 18px;
        opacity: 1;
        border: 1px solid #003947;
      }
    }
    .tab-box-con-one{
      width: 100%;
      margin-top: 15px;
      height: 600px;
      background-color: #22576826;
      border-radius: 0px 0px 0px 0px;
      // background: url("~@/assets/machine/machine1.png");
      // background-size: 100% 546px;
      // background-repeat: no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      // .weather-show-view{
      //   margin-top: 5px;
      //   margin-right: 5px;
      //   float: right;
      //   background-color: rgba(0,0,0,.32);
      //   height: 53px;
      //   border-radius: 5px;
      // }
    }
    .tab-box-con-two{
      width: 100%;
      height: 100px;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      padding: 10px 10px  0 ;
    }
  }
}
.standing-book-box{
  position: absolute;
  top: 3%;
  left: 30px;
  height: 95%;
  width: 250px;
    .standing-book-box-item{
          font-size: 15px;
          padding:0 10px 10px ;
          border-bottom: 1px dashed #006C69;
          line-height: 33px;
        }
}
.back-picture-box{
    height: 95%;
    width: calc(100% - 550px);
    position: relative;
    background: url("~@/assets/machine/machine1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.one-dataItem-box{
  position: absolute;
  z-index: 2;
}
</style>
